<template>
	<!-- 歌曲列表 -->
	<view class="songList" v-if="songlist.length!==0">
		<view class="item" v-for="(item,index) in songlist">
			<view class="xuhao">
				{{index+1}}
			</view>
			<view class="pic">
				<image :src="item.al.picUrl" mode=""></image>
			</view>
			<view class="author">
				<view class="author-name one-lint-hidden">
					{{item.name}}
				</view>
				<view class="author-more">
					{{item.ar[0].name}}
				</view>
			</view>
			<view class="anniu" @click="toSongPlay(item.id)">
				<i class="iconfont icon-bofang"></i>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "songList",
		data() {
			return {

			};
		},
		methods:{
			// 排行榜的歌曲  去播放这个歌曲
			toSongPlay(id) {
				console.log('即将进入歌曲页的id',id);
				uni.navigateTo({
					url: '/subPackages/pages/songPlay/songPlay?id=' + id,
			
				})
			},
		},
		props: {
			songlist: {
				type: Array,
				default: () => []
			}
		}
	}
</script>

<style lang="less">
	.songList {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		.item{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.xuhao{
				line-height: 100rpx;
				width: 50rpx;
				height: 100rpx;
			}
			.author{
				margin-left: 20rpx;
				width: 610rpx;
				height: 100rpx;
				border-bottom: 1px solid #C8C7CC;
				
				.author-name{
					font-size: 34rpx;
					width: 480rpx;
				}
				
				.author-more{
					margin-top: 10rpx;
					font-size: 26rpx;
				}
			}
			.pic{
				image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
			}
			.anniu{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
</style>
